<template>
  <div>
    <!-- <MainNavBar>
      <template #center-name> 首页 </template>
    </MainNavBar> -->
    <div class="container">
      <div class="wrapper">
        <div class="date">
          <span class="top">
            <img src="http://qnticao.laigl.com/vue/c5233849c15ae382bdee8e57b8fbe4f.png" alt="2021">
          </span>
          <span class="bottom">2021年6月1日——12月31日</span>
          <span class="line"></span>
        </div>
        <div class="name">
          <!-- <span class="main-name">“杨威杯”</span> -->
          <span class="info"
            >
            <img src="../../assets/images/6ea41a37fd1b804390a1e33f72ef02a.png" alt="">
            <!-- 全国首届体操通级比赛
            <br />
            暨全国亲子体操比赛 --></span
          >
        </div>
        <div class="ball">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
        <div class="roll">
          <div class="left">
            <img src="http://qnticao.laigl.com/vue/roll.png" alt="" />
          </div>
          <div class="right"></div>
        </div>
        <div class="point">
          <div class="top"></div>
          <div class="middle"></div>
          <div class="bottom"></div>
        </div>
        <div class="sign">
          <div class="icon-left">
            <img src="http://qnticao.laigl.com/vue/icon-left.png" alt="" />
          </div>
          <div class="icon-right">
            <img src="http://qnticao.laigl.com/vue/icon-right.png" alt="" />
          </div>
          <div class="goto-sign" @click="goToOtherPage('sign')">
            <span>去报名</span>
            <span><img src="http://qnticao.laigl.com/vue/arrow.png" alt="" /></span>
          </div>
          <div class="main">
            <div class="match" @click="goToOtherPage('match')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/matchRules.png" alt="" />
              </div>
              <div>赛事规程</div>
            </div>
            <div class="profile" @click="goToOtherPage('profile')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/profile.png" alt="" />
              </div>
              <div>个人中心</div>
            </div>
            <div class="score" @click="goToOtherPage('score')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/socreQuery.png" alt="" />
              </div>
              <div>成绩查询</div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="group2">
            <img src="http://qnticao.laigl.com/vue/group2.png" alt="" />
          </div>
          <div class="group1">
            <img src="http://qnticao.laigl.com/vue/group1.png" alt="" />
          </div>
          <div class="header">
            <img src="http://qnticao.laigl.com/vue/header.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "@/network/request.js";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { Toast } from "vant";
export default {
  name: "Home",
  components: {
    MainNavBar,
  },
  setup() {
    const router = useRouter();
    const goToOtherPage = (type) => {
      switch (type) {
        case "sign":
          router.push("/sign");
          break;
        case "match":
          router.push("/matchRules");
          break;
        case "profile":
          router.push("/profile");
          break;
        case "score":
          router.push("/scoreinquiry");
          break;
      }
    };
    const sq = async () => {
      let locationUrl = "http://tc.weilang.top/vue";
      let token = sessionStorage.getItem("token") || false; // 从内存取得token
      if (!token) {
        // 内存内没有openid
        // 检测是否参数内有code，若有则跳接口获取openid，若没有则跳授权页
        console.log("内存内没有token");
        if (window.location.href.indexOf("code") >= 0) {
          /code=(.*)&state/.test(window.location.href);
          const code = RegExp.$1;
          sessionStorage.setItem("code", code);
          const res = await request({
            url: "v1/ucenter/doLogin",
            data: {
              code,
            },
          });
          if (res.code === 200) {
            console.log("可以存储token了");
            const {token,openid} = res.data;
            sessionStorage.setItem("token", String(token));
            sessionStorage.setItem("openid", String(openid));
            window.location.href = "http://tc.weilang.top/vue/"
          } else {
            Toast(res.msg);
          }
        } else {
          // 链接里没有code
          console.log("链接里没有code");
          let redirectHref =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            "wxd6d5d17a0f9a09d2" +
            "&redirect_uri=" +
            encodeURIComponent(locationUrl) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE" +
            "#wechat_redirect";
          console.log("请求授权地址" + redirectHref);
          window.location.href = redirectHref; // 跳转微信链接获取code和state（state没啥用目前暂时）
        }
      } else {
        // 内存里有openid
        console.log("内存里有token");
        // let member = {};
        // member.nickName = localStorage.getItem("nickName");
        // member.userHeadimg = localStorage.getItem("userHeadimg");
        // member.amount = localStorage.getItem("amount");
        // member.user_id = localStorage.getItem("user_id");
        // localStorage.setItem("userInfo", JSON.stringify(member));
      }
    };

    onMounted(() => {
      sq();
    // sessionStorage.setItem("token", "bfc6b99b0131d23a2606556947ef000d");
    //  sessionStorage.setItem("openid", "oO2yA1fX5KxzSSgq5D83DZO5AcRw");
    });
    return {
      goToOtherPage,
    };
  },
};
</script>
<style lang="less" scoped>
.container {
  .wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -9.067vw;
  }
  width: 100%;
  height: calc(100vh);
  margin-top: -13.333vw;
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-size: 100% auto;
  background-repeat: repeat;
  background-color: #0054a6;
  position: relative;
  // overflow: hidden;
  .date {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 48.8vw;
    height: 27.733vw;
    margin-top: 8.533vw;
    margin-left: 5.867vw;
    padding-top:9.6vw;
    .top {
      color: #fff;
      width: 48.8vw;
      // font-size: 21.333vw;
      // font-style: oblique;
      font-style: italic;
      font-family: YouSheBiaoTiHei;
      // line-height: 27.733vw;
      letter-spacing: -1.6vw;
      font-weight: 600;
      margin-left: 1.333vw;
      img{
        width: 100%;
        vertical-align: middle;
      }
    }
    .bottom {
      z-index: 116;
      position: absolute;
      left: 1.867vw;
      top: 19.467vw;
      width: 45.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(154, 243, 191, 1);
      font-size: 3.733vw;
      font-family: PingFangSC-Semibold;
      line-height: 5.333vw;
      text-align: center;
      letter-spacing: -0.267vw;
    }
    .line {
      z-index: 117;
      position: absolute;
      left: 3.467vw;
      top: 26.667vw;
      width: 10.667vw;
      height: 0.533vw;
      background-color: rgba(150, 239, 191, 1);
    }
  }
  .name {
    .main-name {
      z-index: 130;
      position: absolute;
      left: 1.867vw;
      top: 43.467vw;
      width: 85.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 8vw;
      font-family: REEJI-BigYoung-BoldGB2.0-Regular;
      line-height: 10.133vw;
      text-align: left;
      text-shadow: 0vw 0.533vw 1.067vw rgba(6, 69, 130, 1);
    }
    .info {
      z-index: 129;
      position: absolute;
      left: 6.133vw;
      top: 42.8vw;
      width: 85.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 8vw;
      font-family: REEJI-BigYoung-BoldGB2.0-Regular, "微软雅黑";
      line-height: 10.133vw;
      text-align: left;
      text-shadow: 0vw 0.533vw 1.067vw rgba(6, 69, 130, 1);
      img{
        width: 100%;
      }
    }
  }
  .ball {
    position: absolute;
    left: 66.133vw;
    top: 31vw;
    .top {
      position: absolute;
      left: 1.333vw;
      top: -2.667vw;
      z-index: 1;
      width: 10.4vw;
      height: 10.4vw;
      background: linear-gradient(to right, #0054a6 0%, #a0f9c0 100%);
      border-radius: 50%;
    }
    .bottom {
      position: absolute;
      width: 26.4vw;
      height: 26.4vw;
      background: linear-gradient(32deg, #0054a6 0%, #f19a96 100%);
      border-radius: 50%;
    }
  }
  .roll {
    position: absolute;
    left: 0;
    top: 56vw;
    .left {
      width: 12vw;
      height: 16.267vw;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      position: absolute;
      right: 0;
      bottom: 0.267vw;
      width: 5.067vw;
      height: 5.067vw;
      border-radius: 50%;
      background: linear-gradient(116deg, #a0f9c0 0%, #0054a6 100%);
    }
  }
  .point {
    position: absolute;
    left: 69.333vw;
    top: 69vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top,
    .middle,
    .bottom {
      margin-bottom: 1.333vw;
      border-radius: 50%;
      opacity: 0.69;
      background-color: #fccf00;
    }
    .top {
      width: 0.8vw;
      height: 0.8vw;
    }
    .middle {
      width: 1.333vw;
      height: 1.333vw;
    }
    .bottom {
      width: 1.867vw;
      height: 1.867vw;
    }
  }
  .sign {
    position: absolute;
    display: flex;
    top: 87vw;
    left: 6.133vw;
    right: 5.867vw;
    width: 88vw;
    height: 43.733vw;
    background-color: #fff;
    border-radius: 3.2vw;
    .icon-left {
      position: absolute;
      left: 1.867vw;
      top: -4.533vw;
      img {
        width: 12.8vw;
        height: 17.6vw;
      }
    }
    .icon-right {
      position: absolute;
      right: -0.267vw;
      bottom: -8vw;
      img {
        width: 12.8vw;
      }
    }
    .goto-sign {
      position: absolute;
      right: 6.4vw;
      top: -5.067vw;
      width: 34.133vw;
      height: 10.133vw;
      background-color: #fccf00;
      line-height: 10.133vw;
      text-align: center;
      box-shadow: 0vw 1.6vw 2.667vw 0vw rgba(252, 207, 0, 0.5);
      border-radius: 6.133vw;
      color: #fff;
      font-size: 4.8vw;
      & img {
        vertical-align: middle;
        width: 4.088vw;
        height: 12.93;
        margin-left: 2.667vw;
        margin-bottom: 0.533vw;
      }
    }
    .main {
      width: 73.333vw;
      margin: 0 8.667vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 3.733vw;
      color: rgba(0, 84, 166, 1);
      .match,
      .profile,
      .score {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
      }
      .img {
        width: 12.533vw;
        height: 12.533vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 0.267vw solid #0054a6;
        background-color: rgba(0, 84, 166, 0.11);
        box-shadow: 0 1.6vw 2.667vw 0 rgba(0, 84, 166, 0.11);
        margin-bottom: 1.333vw;
        & img {
          width: 5.6vw;
          vertical-align: middle;
          // height: 6.4vw;
        }
      }
    }
  }
  .footer {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 55.2vw;
    top: 137vw;
    left: 22.4vw;
    right: 22.4vw;
    .group2 {
      width: 18.133vw;
      height: 15.467vw;
      img {
        height: 100%;
        height: 100%;
      }
    }
    .group1 {
      width: 13.333vw;
      height: 15.467vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header {
      width: 14.933vw;
      height: 15.467vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
